<script setup lang="ts">
  import { ref } from 'vue'
  import { onLoad,onShow } from '@dcloudio/uni-app'
  import { REFUNDS_ENUM } from '@/utils/basicData'
  import { postRefundCancel, postRefundInfo } from '@/api/training'
  import { showModal } from '@/utils/tools'
  const bottomPadding = (uni.getSystemInfoSync().screenHeight as number) - (uni.getSystemInfoSync().safeArea.bottom as number)
  const refundsInfo = ref({
    file:[]
  })
  const refundsId = ref()
  onLoad((options:any) => {
    refundsId.value = options.id
  })
  onShow(() => {
    postRefundInfo({id:refundsId.value}).then(res => {
      res.data.file = res.data.file ? JSON.parse(res.data.file) : []
      refundsInfo.value = res.data
    })
  })

  const cancelClick = () => {
    showModal({
      title:'温馨提示',
      content:'您确定要撤销申请退费吗？',
      success:(res) => {
        if(res.confirm){
          postRefundCancel({id:refundsInfo.value.id}).then(res => {
            if(res.data){
              uni.navigateBack()
            }
          })
        }
      }
    })
  }

  const resubmit = () => {
    const params = {
      id:refundsInfo.value.id,
      name:refundsInfo.value.payInfo.orderTypeEnum == 1 ? refundsInfo.value.payInfo.productName : refundsInfo.value.payInfo.campName,
      regId:refundsInfo.value.payInfo.regId,
      sourceId:refundsInfo.value.payInfo.id,
      orderTypeEnum:refundsInfo.value.payInfo.orderTypeEnum,
      payTime:refundsInfo.value.payInfo.payTime,
      createdTime:refundsInfo.value.payInfo.createdTime
    }
    uni.navigateTo({url:`/pageSignUp/refundsForm/refundsForm?params=${JSON.stringify(params)}`})
  }
</script>

<template>
  <view class="refunds-details">
    <xx-title title="退费详情"/>
    <view class="refunds-header" :class="`refunds-header-${refundsInfo.refundApplicationStatusEnum}`">
      <view class="refunds-state">
        <image :src="`${$Prefix}/public/images/smallImage/refunsing.png`" mode="widthFix"/>
      </view>
      <view class="refunds-info">
        <view class="refunds-state-text">{{REFUNDS_ENUM[refundsInfo.refundApplicationStatusEnum]}}</view>
        <view class="refunds-text" v-if="refundsInfo.refundApplicationStatusEnum == 0 || refundsInfo.refundApplicationStatusEnum == 1">我们需要核对退款信息，请您保持联络畅通，审核预计3个工作日内，望您谅解。</view>
        <view class="refunds-text" v-else-if="refundsInfo.refundApplicationStatusEnum == -2 || refundsInfo.refundApplicationStatusEnum == -1">退回原因：{{refundsInfo.lastLog}}</view>
        <view class="refunds-text" v-else-if="refundsInfo.refundApplicationStatusEnum == -3">您已取消退款申请，若要再次申请，请点击下方重新提交</view>
        <view class="refunds-text" v-else-if="refundsInfo.refundApplicationStatusEnum == 10">您已通过申请，费用将按原路返回，请注意查收，由于网络可以延迟返回，望您谅解。</view>
      </view>
    </view>
    <view class="refunds-body">
      <view class="refunds-title">
        申请时间:{{refundsInfo.createdTime}}
      </view>
      <view class="refunds-info">
        <view class="title">退费信息</view>
        <view class="refunds-info-body">
          <view class="body-title">{{refundsInfo?.payInfo?.productName}} <text v-if="refundsInfo.value?.payInfo?.orderTypeEnum == 0">- {{refundsInfo?.payInfo?.eventsNumberName}}</text></view>

          <view class="refunds-item">
            <view class="label">支付时间：</view>
            <view class="value">{{refundsInfo?.payInfo?.payTime}}</view>
          </view>


          <view class="refunds-item">
            <view class="label">成交时间：</view>
            <view class="value">{{refundsInfo?.payInfo?.createdTime}}</view>
          </view>
        </view>
        <view class="refunds-item">
          <view class="label">退款说明</view>
          <view class="value">{{ refundsInfo.refundInstructions }}</view>
        </view>
        <view class="refunds-item">
          <view class="label">联系人</view>
          <view class="value">{{refundsInfo.contacts}}</view>
        </view>
        <view class="refunds-item">
          <view class="label">联系电话</view>
          <view class="value">{{refundsInfo.contactsPhone}}</view>
        </view>
      </view>
    </view>
    <view class="refunds-file" v-if="refundsInfo?.file.length > 0">
      <view class="refunds-title">证明材料</view>
      <view class="refunds-picture">
        <up-album :urls="refundsInfo.file" keyName="fullUrl" multipleSize="100"></up-album>
      </view>
    </view>
    <view class="bottom-fixed" :style="{paddingBottom:`calc(${bottomPadding}px + 14rpx)`}">
      <view class="seizeASeat"></view>
    </view>
    <view class="bottom-btn" :style="{paddingBottom:`calc(${bottomPadding}px + 14rpx)`}">

      <view class="group-registration" v-if="refundsInfo.refundApplicationStatusEnum == 0 || refundsInfo.refundApplicationStatusEnum == 1" @click="cancelClick">撤销申请</view>
      <view class="group-registration resubmit" v-else-if="refundsInfo.refundApplicationStatusEnum && refundsInfo.refundApplicationStatusEnum != 10 && refundsInfo.refundApplicationStatusEnum != 0 && refundsInfo.refundApplicationStatusEnum != 1" @click="resubmit">重新提交</view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.refunds-details{
  width: 100%;
  box-sizing: border-box;
  background-color: #F3F3F3;
  min-height: 100vh;
  .refunds-header{
    display: flex;
    align-items: flex-start;
    padding: 20rpx 40rpx 60rpx 40rpx;
    background: linear-gradient(270deg, #92C75B 0%, #89BA55 100%);
    &--2,&--1{
      background: linear-gradient(270deg, #c75b64 0%, #ba5555 100%);
    }
    &--3{
      background: linear-gradient(270deg, #5ba7c7 0%, #55a2ba 100%);
    }
    .refunds-state{
      width: 44rpx;
      margin-right: 10rpx;
      image{
        width: 100%;
      }
    }
    .refunds-info{
      width: calc(100% - 54rpx);
      .refunds-state-text{
        color: #FFFFFF;
        font-weight: 500;
        font-size: 36rpx;
      }
      .refunds-text{
        color: rgba(255, 255, 255, 0.8);
        font-size: 28rpx;
        font-weight: 500;
        margin-top: 5rpx;
        letter-spacing: 1rpx;
      }
    }
  }
  .refunds-body{
    position: relative;
    z-index: 5;
    padding: 24rpx 32rpx;
    margin-top: -40rpx;
    margin-left: 28rpx;
    margin-right: 28rpx;
    background-color: #FFFFFF;
    border-radius: 20rpx;
    .refunds-title{
      padding-bottom: 10rpx;
      border-bottom: 1rpx solid #EBEBEB;
      font-size: 28rpx;
      color: #818496;
    }
    .refunds-info{
      margin-top: 15rpx;
      .title{
        font-weight: 500;
        font-size: 32rpx;
        color: #21252E;
      }
      .refunds-item{
        display: flex;
        margin-bottom: 20rpx;
        &:last-child{
          margin-bottom: 0;
        }
        .label{
          width: 140rpx;
          color: #818496;
          font-size: 28rpx;
        }
        .value{
          width: calc(100% - 140rpx);
          color: #21252E;
          font-size:28rpx;
        }
      }
      .refunds-info-body{
        margin: 20rpx 0;
        box-sizing: border-box;
        background-color: #F7F7F7;
        padding: 20rpx;
        border-radius: 20rpx;
        .body-title{
          font-size: 28rpx;
          color: #505363;
          margin-bottom: 20rpx;
        }
        .refunds-item{
          justify-content: space-between;
          .label{
            width: 120rpx;
            color: #818496;
            font-size: 24rpx;
          }
          .value{
            text-align: right;
            font-size: 24rpx;
            color: #818496;
            width: calc(100% - 120rpx);
          }
        }
      }
    }
  }
  .refunds-file{
    padding: 24rpx 32rpx;
    margin-top: 20rpx;
    margin-left: 28rpx;
    margin-right: 28rpx;
    background-color: #FFFFFF;
    border-radius: 20rpx;
    .refunds-title{
      padding-bottom: 10rpx;
      margin-bottom: 20rpx;
      border-bottom: 1rpx solid #EBEBEB;
      font-weight: 500;
      font-size: 32rpx;
      color: #21252E;
    }
  }
}

.bottom-fixed{
  padding-top: 14px;
  .seizeASeat{
    height: 100rpx;
  }
}

.bottom-btn{
  z-index: 11;
  position: fixed;
  bottom: 0;
  width: 100%;
  padding-left: 28rpx;
  padding-right: 28rpx;
  box-sizing: border-box;
  border-top: 1px solid #F1F2F4;
  padding-top: 14rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #FFFFFF;
  .group-registration{
    padding: 16rpx 0;
    text-align: center;
    border-radius: 16rpx;
    box-sizing: border-box;
    border: 2px solid #ECEEF1;
    margin-right: 20rpx;
    margin-left: 20rpx;
    width: 100%;
    font-size: 26rpx;
    color: #505363;
    font-weight: 500;
    letter-spacing: 2rpx;
    &.resubmit{
      background: #c75b64;
      color: #FFFFFF;
    }
  }
}
</style>
